<template>
	<view class="ble_connect_wrap">
		<view class="header">
			<view class="content">
				<div class="blue_tooth_connect_box">
					<img class="icon" src="https://d.lohand.com:1112/guanwang/image/bluetooth.png" alt="" />
					<text class="text">未连接</text>
				</div>
			</view>
		</view>
		<view class="main">
			<div class="dev_list_box">
				<div class="dev_item_box"></div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bleConnect",
		data() {
			return {

			}
		},
		methods: {

		},
		created() {
			// console.log('Text',TextDecoder);
		}
	}
</script>

<style>
	.ble_connect_wrap {
		width: 100vw;
		height: calc(100vh);
		box-sizing: border-box;
		background: #f3f3f3;

		.header {
			width: 100vw;
			height: 28%;
			padding: 38px 16px 16px 16px;
			box-sizing: border-box;
			/* position: relative; */


			.content {
				width: 100%;
				height: 100%;
				background-color: white;
				/* border: 1px solid red; */
				border-radius: 4px;
				margin: 0 auto;
				position: relative;
				box-shadow:
					2px 2px 4px #d1d1d1;
					/* -2px -2px 4px #d1d1d1; */


				.blue_tooth_connect_box {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					flex-direction: column;
					text-align: center;


					.icon {
						width: 80px;
						height: 80px;
						position: relative;
						left: 50%;
						transform: translateX(-50%);
						margin-bottom: 16px;
					}

					.text {
						font-size: 20px;
						font-weight: bold;
						letter-spacing: 1px;
					}
				}
			}
		}

		.main {
			/* border: 1px solid red; */
			width: 100vw;
			height: 72%;
			box-sizing: border-box;
			padding:0px 16px 16px 16px;

			.dev_list_box {
				height: 100%;
				background-color: white;
				border-radius: 4px;
				box-shadow:
					2px 2px 4px #d1d1d1;
				
				.dev_item_box {}
			}
		}
	}
</style>